package com.grechur.wanandroidcompose.page

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.EmojiEvents
import androidx.compose.material.icons.filled.Rowing
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import com.grechur.wanandroidcompose.bean.coin.CoinBean
import com.grechur.wanandroidcompose.ui.theme.Purple200
import com.grechur.wanandroidcompose.ui.theme.Purple700
import com.grechur.wanandroidcompose.viewmodel.CoinViewModel
import com.grechur.wanandroidcompose.R

@Composable
fun CoinRankPage(globalNavigation: NavHostController, coinViewModel: CoinViewModel) {
    val appBarHeight = 56.dp
    val statusBarDp = with(LocalDensity.current) {
        WindowInsets.statusBars.getTop(this).toDp()
    }
    LaunchedEffect(Unit, block = {
        coinViewModel.getCoinRank()
    })
    Log.e("zhouzhu","rank:${coinViewModel.hashCode()}")
    Scaffold(topBar = {
        TopAppBar(
            title = {
                Text(text = "积分排行榜")
            },
            navigationIcon = {
                IconButton(onClick = { globalNavigation.popBackStack() }) {
                    Icon(imageVector = Icons.Default.ArrowBack, contentDescription = "back")
                }
            },
            modifier = Modifier
                .background(
                    brush = Brush.linearGradient(
                        listOf(
                            Purple700,
                            Purple200
                        )
                    )
                )
                .height(appBarHeight + statusBarDp)
                .padding(top = statusBarDp),
            backgroundColor = Color.Transparent,
            elevation = 0.dp
        )
    }) {
        LazyColumn(modifier = Modifier.padding(it).navigationBarsPadding()) {

            items(coinViewModel.rankCoins.getOrDefault(listOf())) { coinBean: CoinBean ->
                Column {
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Box(modifier = Modifier.size(50.dp)) {
                            Image(painter = painterResource(id = R.mipmap.rank),
                                contentDescription = "")
                            Text(text = "${coinBean.rank}",
                                color = Color.Red,
                                modifier = Modifier
                                    .size(50.dp)
                                    .padding(top = 13.dp),
                                textAlign = TextAlign.Center)
                        }
                        Column(modifier = Modifier.padding(start = 10.dp)) {
                            Text(text = "${coinBean.username}",
                                color = Color.Black,
                                fontSize = 16.sp)
                            Text(text = "金币：${coinBean.coinCount} 等级：${coinBean.level}",
                                color = Color.Gray,
                                fontSize = 16.sp,
                                modifier = Modifier.padding(top = 10.dp))
                        }
                    }
                    Divider()
                }
            }
        }
    }
}